<!--补全检验，显示信息，修改-->
<template>
  <div class="layout">

    <el-tabs type="border-card">
      <el-tab-pane label="个人信息">
        <el-form ref="registerForm" :model="form"
                 label-position="right"
                 label-width="100px"
                 style="max-width: 460px"
                 class="loginForm"
        >
          <el-form-item label="账号" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input type="password" v-model="form.confirmPassword"   @blur="confirmFunc"></el-input>
          </el-form-item>
          <el-form-item label="姓：" prop="lastname">
            <el-input type="text" v-model="form.lastname"></el-input>
          </el-form-item>
          <el-form-item label="名：" prop="firstname">
            <el-input type="text" v-model="form.firstname"></el-input>
          </el-form-item>
          <el-form-item label="电话：" prop="phone">
            <el-input type="text" v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="email">
            <el-input type="text" v-model="form.email"></el-input>
          </el-form-item>
<!--          <el-form-item label="status：" prop="email">-->
<!--            <el-input type="text" v-model="form.status"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="地址1：" prop="addre1">
            <el-input type="text" v-model="form.addre1"></el-input>
          </el-form-item>
          <el-form-item label="地址2：" prop="addre2">
            <el-input type="text" v-model="form.addre2"></el-input>
          </el-form-item>
          <el-form-item label="城市：" prop="city">
            <el-input type="text" v-model="form.city"></el-input>
          </el-form-item>
          <el-form-item label="州：" prop="state">
            <el-input type="text" v-model="form.state"></el-input>
          </el-form-item>
          <el-form-item label="邮编：" prop="postalCode">
            <el-input type="text" v-model="form.postalCode"></el-input>
          </el-form-item>
          <el-form-item label="国家：" prop="country">
            <el-input type="text" v-model="form.country"></el-input>
          </el-form-item>
<!--          <el-form-item label="语言：" prop="languagePreference">-->
<!--            <el-input type="text" v-model="form.languagePreference"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="口味偏好：" prop="favouriteCategoryId">-->
<!--            <el-input type="text" v-model="form.favouriteCategoryId"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="语言：" prop="languagePreference">
            <!--                    <el-input type="text" v-model="form.languagePreference"></el-input>-->
            <el-select v-model="form.languagePreference" placeholder="请选择语言">
              <el-option v-for="language in languages" :key="language" :label="language" :value="language"></el-option>
            </el-select>
          </el-form-item>



          <el-form-item label="口味偏好：" prop="favouriteCategoryId">
            <!--                    <el-input type="text" v-model="form.favouriteCategoryId"></el-input>-->
            <!--                  </el-form-item>-->
            <el-select v-model="form.favouriteCategoryId" placeholder="请选择口味">
              <el-option v-for="flavor in flavors" :key="flavor" :label="flavor" :value="flavor"></el-option>
            </el-select>
            <!--                  <div>您选择的口味: {{ selectedFlavors }}</div>-->
          </el-form-item>

          <el-checkbox v-model="form.listOption" prop="listOption" >是否显示喜好</el-checkbox>
          <el-checkbox v-model="form.bannerOption" prop="bannerOption">是否显示推荐</el-checkbox>
          <el-form-item>

            <el-button type="primary" @click="register">保存修改</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import axios from "axios";
export default {

  name: "AccountView",

  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
  setup() {

    const user_json = sessionStorage.getItem('user');
    const user = JSON.parse(user_json);
    const form = ref({
      username:user.username,
     password:user.password,
      firstname:user.firstName,
     lastname:user.lastName ,
      email:user.email ,
     addre1:user.address1,
     addre2:user.address2,
     phone:user.phone,
     city:user.city,
     state:user.state,
     postalCode:user.zip,
     country:user.country,
      confirmPassword:user.repeatedPassword,
      favouriteCategoryId:user.favouriteCategoryId,
      languagePreference:user.languagePreference,
      status:user.status,
      listOption:user.listOption,
      bannerOption:user.bannerOption,

    });

    const register = () => {
      // 处理修改信息逻辑
      //路径修改；
      //
      axios.put('http://127.0.0.1:8091/information/editor', {

        account:{
          username: form.value.username,
          phone:form.value.phone,
          email:form.value.email,
          firstName:form.value.firstname,
          lastName:form.value.lastname ,
          address1:form.value.addre1,
          address2:form.value.addre2,
          city:form.value.city,
          state:form.value.state,
          zip:form.value.postalCode,
          country:form.value.country,
          status: null,
        },

        profile:{
          favouriteCategoryId:form.value.favouriteCategoryId,
          languagePreference:form.value.languagePreference,
          status:form.value.status,
          listOption:form.value.listOption,
          bannerOption:form.value.bannerOption,


        },

        bannerData:{
          favouriteCategoryId:form.value.favouriteCategoryId,
          bannerOption:form.value.bannerOption,
        },
        repeatedPassword:form.value.confirmPassword,
        password: form.value.password,










      }) .then(response => {

        if(response.data.status===200){
          //  if (typeof response!= "undefined") {
          //   console.log('1');
          // }
          //  else
           alert("修改成功");}
        else
          alert("修改失败");
      })
          .catch(error => {
            // 注册失败
            // 处理错误情况，例如显示错误消息
            alert("修改失败");
          });
      console.log('修改信息:', form.value);
    };

    // const confirmFunc = () => {
    //   if (form.value.confirmPassword !== form.value.password)
    //     ElMessage.error("密码与确认密码不一致.");
    // };
    // const resetForm = () => {
    //   form.value.username = '';
    //   form.value.password = '';
    //   form.value.confirmPassword = '';
    // };
    const resetForm = () => {

      form.value.username = '';
      form.value.password = '';
     // form.value.confirmPassword = '';
      form.value.firstname= '';
      form.value.email= '';
      form.value.lastname = '';
      form.value.addre1= '';
      form.value.phone= '';
    //  form.value.captcha= '';
      form.value.addre2= '';
      form.value.city= '';
      form.value.state= '';``
      form.value.postalCode= '';
      form.value.country= '';
      form.value.confirmPassword='';
      form.value.favouriteCategoryId='';
      form.value.languagePreference='';
      form.value.status='';
      form.value.listOption='';
     form.value.bannerOption='';

      //   form.value.captcha= '';
    };

    return {
      flavors: ['乳酪', '水果', '慕斯', '坚果'],
      selectedFlavor: '乳酪',
      languages:['中文', '英文', '法语', '德语'],
      selectedLanguage: '中文',

      form,
      register,
      resetForm,
    };
  },
};
</script>


<style scoped>
.layout {
  position: relative;
  left: calc(50% - 200px);
  top: 40%;
  width: 400px;
}
.loginBtn {
  width: 100px;
}
.loginForm {
  text-align: center;
}
.checkBox {
  margin-left: 7px;
}
.inpWidth {
  width: 165px;
}
</style>
